<template>
  <div class="head">
    <div class="tit" @click="tab">
      <button id="1" :class="id === '1' ? 'active' : ''" class="tex1">
        退回件中转费汇总
      </button>
      <button id="2" :class="id === '2' ? 'active' : ''" class="tex1">
        退回件中转明细
      </button>
    </div>
    <div class="line" />
    <el-row>
      <el-col :span="24">
        <div v-if="id === '1'" class="title1">
          <el-form
            ref="form"
            style="
              display: flex;
              flex-wrap: wrap;
              margin-top: 24px;
              justify-content: space-between;
            "
            :model="form"
            label-width="80px"
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                width: 1578px;
              "
            >
              <el-form-item class="text" label="日期">
                <el-date-picker
                  v-model="value"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="changeTime"
                  style="width: 685px"
                />
              </el-form-item>
              <el-form-item class="text" label="汇总层级">
                <el-select
                  v-model="form.timeType"
                  class="input"
                  placeholder="请选择"
                  style="width: 286px"
                >
                  <el-option label="按天" value="1" />
                  <el-option label="按时间段" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item class="text" label="汇总维度">
                <el-select
                  v-model="form.collectType"
                  class="input"
                  placeholder="请选择"
                  style="width: 286px"
                >
                  <el-option label="承包区" value="1" />
                  <el-option label="网点" value="2" />
                  <el-option label="网点+中心" value="3" />
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="khClear">重置</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div v-if="id === '1'" class="title1">
          <el-form
            ref="form"
            style="
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
            "
            :model="form"
            label-width="80px"
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                width: 764px;
              "
            >
              <el-form-item class="text" label="结算网点">
                <el-select
                  :disabled="true"
                  placeholder="辽宁盘锦公司"
                  style="width: 286px"
                >
                  <el-option label="辽宁盘锦公司" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item class="text" label="转运中心">
                <el-select
                  v-model="form.transferCentreId"
                  placeholder="请选择"
                  style="width: 286px"
                >
                  <el-option
                    v-for="item in TransferCenterList"
                    :key="item.id"
                    class="input"
                    :label="item.transferCenter"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button @click="onSubmit"
                  ><i class="el-icon-upload2" />导出</el-button
                >
              </el-form-item>
            </div>
          </el-form>
        </div>
        <!-- <div v-if="id === '2'" style="display: flex;flex-wrap: wrap;" class="head1"> -->
        <!-- <div class="title">
                                        <el-form ref="form" :model="form" label-width="80px">
                                          <el-form-item class="text" label="运单编号">
                                            <el-input v-model="form.desc" rows="4" class="input" placeholder="一行表示一个运单号(支持1000个运单号)"
                                              type="textarea" />
                                          </el-form-item>
                                        </el-form>
                                      </div> -->
        <!-- <div style="margin-left: 40px;margin-top: 18px;"> -->
        <div v-if="id === '2'" class="title1">
          <el-form
            ref="form"
            :rules="rules"
            style="
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              margin-top: 24px;
            "
            :model="form"
            label-width="80px"
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                width: 1560px;
              "
            >
              <el-form-item class="text" label="运单号">
                <el-input
                  v-model="form1.transportCode"
                  class="input"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                style="margin-left: 0"
                class="text"
                label="结算网点"
              >
                <el-select
                  :disabled="true"
                  v-model="form1.networkNameId"
                  class="input"
                  placeholder="辽宁盘锦公司"
                >
                  <el-option label="辽宁盘锦公司" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item class="text" label="运转中心">
                <el-select
                  v-model="form1.backwardFirstBelongTransferCentreId"
                  placeholder="请选择"
                  style="width: 286px"
                >
                  <el-option
                    v-for="item in TransferCenterList"
                    :key="item.id"
                    class="input"
                    :label="item.transferCenter"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item class="text" label="是否分摊">
                <el-select
                  v-model="form1.isShare"
                  class="input"
                  placeholder="请选择"
                >
                  <el-option label="全部" value="1" />
                  <el-option label="是" value="2" />
                  <el-option label="否" value="3" />
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="khClear">重置</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="title1" v-if="id === '2'">
          <el-form
            ref="form"
            :rules="rules"
            style="
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
            "
            :model="form"
          >
            <div style="display: flex; flex-wrap: wrap">
              <el-form-item
                style="display: flex; margin-left: 38px"
                class="text"
                label="日期"
              >
                <el-date-picker
                  v-model="value1"
                  style="width: 685px"
                  type="daterange"
                  start-placeholder="开始日期"
                  value-format="yyyy-MM-dd"
                  @change="changeTime"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button @click="onSubmit"
                  ><i class="el-icon-upload2" />导出</el-button
                >
              </el-form-item>
            </div>
          </el-form>
        </div>
        <!-- </div> -->
        <!-- </div> -->
        <el-table
          v-if="id === '1'"
          :data="tableData"
          border
          max-height="550"
          :header-cell-style="{ background: '#f6f6f6' }"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            :index="table_index"
            width="50"
            align="center"
          />
          <el-table-column
            prop="settleDate"
            label="结算日期"
            width="180"
            align="center"
          />
          <el-table-column
            prop="networkNameId"
            label="网点编号"
            align="center"
          />
          <el-table-column
            prop="networkName.networkName"
            label="网点名称"
            align="center"
          />
          <el-table-column
            prop="contractAreaNameId"
            label="承包区编码"
            align="center"
          />
          <el-table-column
            prop="contractAreaName.networkName"
            label="承包区名称"
            align="center"
          />
          <el-table-column
            prop="hqTransferCentre.transferCode"
            label="转运中心编码"
            align="center"
          />
          <el-table-column
            prop="hqTransferCentre.transferCenter"
            label="转运中心名称"
            align="center"
          />
          <el-table-column prop="ticket" label="票数" align="center" />
          <el-table-column prop="weight" label="重量" align="center" />
          <el-table-column prop="amount" label="金额" align="center" />
        </el-table>
        <el-table
          v-if="id === '2'"
          :data="tableData"
          border
          max-height="550"
          :header-cell-style="{ background: '#f6f6f6' }"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            :index="table_index"
            width="50"
            align="center"
          />
          <el-table-column
            prop="settleDate"
            label="结算日期"
            width="180"
            align="center"
          />
          <el-table-column prop="transportCode" label="运单号" align="center" />
          <el-table-column prop="sendDate" label="发件日期" align="center" />
          <el-table-column
            prop="receiveNetworkName.networkName"
            label="收件网点"
            align="center"
          />
          <el-table-column
            prop="zxStartNetworkName.networkName"
            label="正向始发地"
            width="100"
            align="center"
          />
          <el-table-column
            prop="zxStartSuperiorsNetworkName.networkName"
            label="正向始发地上级"
            width="120"
            align="center"
          />
          <el-table-column
            prop="settleNetworkName.networkName"
            label="结算机构"
            align="center"
          />
          <el-table-column
            prop="settleType"
            label="结算机构类型"
            width="110"
            align="center"
          />
          <el-table-column
            prop="client.clientCode"
            label="客户编码"
            align="center"
          />
          <el-table-column
            prop="client.clientName"
            label="客户名称"
            align="center"
          />
          <el-table-column
            prop="client.clientLevel"
            label="客户类型"
            align="center"
          />
          <el-table-column
            prop="returnNetworkName.networkName"
            label="退件机构"
            align="center"
          />
          <el-table-column
            prop="backwardFirstBeIntegerTransferCentre.transferCenter"
            label="逆向第一直属中心"
            width="140"
            align="center"
          />
          <el-table-column
            prop="backwardFirstPathwayTransferCentre.transferCenter"
            label="逆向第一途径中心"
            width="140"
            align="center"
          />
          <el-table-column
            prop="backwardNetworkName.networkName"
            label="逆向目的地"
            width="100"
            align="center"
          />
          <el-table-column
            prop="transportType"
            label="运输方式"
            align="center"
          />
          <el-table-column prop="productType" label="产品类型" align="center" />
          <el-table-column prop="itemType" label="物品类型" align="center" />
          <el-table-column
            prop="backwardRouteCode"
            label="逆向路由号"
            width="100"
            align="center"
          />
          <el-table-column
            prop="settleWeight"
            label="结算重量"
            align="center"
          />
          <el-table-column prop="zxAmount" label="正向金额" align="center" />
          <el-table-column
            prop="backwardAmount"
            label="逆向金额"
            align="center"
          />
          <el-table-column prop="isShare" label="是否分摊" align="center" />
        </el-table>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 51px;
          "
        >
          <div class="title2"></div>
          <div class="block" style="display: flex; justify-content: flex-end">
            <el-pagination
              background
              :current-page="current"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, prev, pager, next"
              :total="+total"
              prev-text="上一页"
              next-text="下一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  TransferCenterApi,
  ReturnTransferFeeApi,
  ReturnTransferFeeApi1,
} from "@/api/HqFinancePanel";

export default {
  components: {},
  data() {
    return {
      id: "1",
      value: "",
      value1: "",
      form: {
        collectType: "",
        endTime: "",
        networkNameId: "1",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
        startTime: "",
        timeType: "",
        transferCentreId: "",
      },
      form1: {
        backwardFirstBelongTransferCentreId: "",
        endTime: "",
        isShare: "",
        networkNameId: "1",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
        startTime: "",
        transportCode: "",
      },
      tableData: [],
      current: "", // 页数
      pages: "", // 条数
      total: "", // 总数
      TransferCenterList: [], //转运中心列表
    };
  },

  computed: {},

  created() {
    this.TransferCenter();
  },

  methods: {
    tab(e) {
      if (e.target.id) {
        this.id = e.target.id;
        this.khClear();
      }
    },
    // 序号
    table_index(index) {
      return (this.pages - 1) * this.current + index + 1;
    },
    // 选择时间
    changeTime() {
      this.form.startTime = this.value[0];
      this.form.endTime = this.value[1];
      this.form1.startTime = this.value1[0];
      this.form1.endTime = this.value1[1];
    },
    // 上一页
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val;
      this.onSubmit();
    },
    // 下一页
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val;
      this.onSubmit();
    },
    //转运中心列表
    async TransferCenter() {
      const res = await TransferCenterApi();
      this.TransferCenterList = res.data;
    },
    // 重置
    khClear() {
      Object.keys(this.form).forEach((key) => {
        if (key !== "pageDate" && key !== "networkNameId") {
          this.form[key] = "";
        }
      });
      Object.keys(this.form1).forEach((key) => {
        if (key !== "pageDate" && key !== "networkNameId") {
          this.form1[key] = "";
        }
      });
      this.tableData = [];
      this.value = "";
      this.value1 = "";
      this.total = "";
      this.current = "";
      this.pages = "";
    },
    table(res) {
      this.tableData = res.data.data;
      this.total = res.data.total;
      this.current = res.data.current;
      this.pages = res.data.pages;
    },
    // 查询
    async onSubmit() {
      if (this.id === "1") {
        const params = {};
        Object.keys(this.form).forEach((key) => {
          if (this.form[key]) {
            params[key] = this.form[key];
          }
        });
        const res = await ReturnTransferFeeApi(params);
        this.table(res);
      } else if (this.id === "2") {
        const params = {};
        Object.keys(this.form1).forEach((key) => {
          if (this.form1[key]) {
            params[key] = this.form1[key];
          }
        });
        const res = await ReturnTransferFeeApi1(params);
        this.table(res);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.head1 {
  .title {
    .input {
      width: 286px;
      // height: 88px;
      background: #ffffff;
      border: 1px solid #b4b4b4;
      border-radius: 4px;
    }
  }

  .head {
    padding: 30px;
  }

  .title {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
  }

  .line {
    height: 1px;
    background: #d8d8d8;
    border-radius: 1px;
    margin-top: 0px;
    margin-bottom: 33px;
  }

  .title1 {
    .text {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;

      // margin-left: 52px;
      .input {
        width: 286px;
        height: 36px;
        background: #ffffff;
        // border: 1px solid #B4B4B4;
        border-radius: 4px;
      }

      .input1 {
        width: 650px;
        height: 36px;
        background: #ffffff;
        border: 1px solid #b4b4b4;
        border-radius: 4px;
      }
    }
  }

  .title2 {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
  }

  .title3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .text {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ee3000;
    }

    .bt {
      width: 98px;
      height: 36px;
      background: #ffffff;
      border: 1px solid #b4b4b4;
      border-radius: 4px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
    }
  }
}

.tit {
  display: flex;

  .tex1 {
    margin-right: 48px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    background: #fff;
    border: 1px #fff solid;
  }

  .active {
    font-family: Source Han Sans CN;
    font-weight: 700;
    color: #2087d0;
    position: relative;
  }

  .active::before {
    position: absolute;
    content: "";
    width: 110px;
    height: 2px;
    background: #2087d0;
    border-radius: 1px;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%);
  }
}

.head {
  padding: 30px;
}

.title {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  margin-top: 20px;
}

.line {
  height: 1px;
  background: #d8d8d8;
  border-radius: 1px;
  margin-top: 19px;
}

.title1 {
  .text {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;

    .input {
      width: 286px;
      height: 36px;
      background: #ffffff;
      border-radius: 4px;
    }

    .input1 {
      width: 708px;
      height: 36px;
      background: #ffffff;
      border: 1px solid #b4b4b4;
      border-radius: 4px;
    }
  }
}

.title2 {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
</style>
